<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title>下拉菜单</title>
    <style>
        p{
            width: 800px;
            height: 35px;
            color:white;
            font-size: 14px;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 100px auto 10px auto;
            box-shadow: 0 0 2px gray;
            background-image: url(3.png);
        }
        span{
            display: block;
            width: 100px;
            height: 20px;
            line-height: 20px;
            border-right:1px solid white;
            cursor: pointer;
    
        }
        span:hover{
            background-color: #769bbf;
        }
        span:nth-last-of-type(1){
            border-right: none;

        }
        ul{
            overflow: hidden;
            list-style: none;
            /*background-color:lightsteelblue;*/
            height: 27px;
            padding: 0;
              border-radius: 5px;
              display: none;
              height: 25px;
              background-image: url(3.png);
              background-position:0 -207px;
              /*background-image: url(3.png);
              background-position: 0 -261px;
              background-repeat: no-repeat;*/
        }
        ul:nth-of-type(1){
            width: 640px;
        }
        ul:nth-of-type(2){
            width: 480px;
        }
         ul:nth-of-type(3){
            width: 400px;
        }
         ul:nth-of-type(4){
            width: 320px;
        }
         ul:nth-of-type(5){
            width: 560px;
        }
        ul:nth-of-type(6){
            width: 320px;
        }
        ul:nth-of-type(7){
            width: 320px;
        }
        li{
            float: left;
            width: 80px;
            height: 18px;
            /*height: 27px;*/
            padding: 0;
            border-right: 1px solid #4c7bab;
            font-size: 12px;
            text-align: center;
            box-sizing: border-box;
            margin-top:3px;
            line-height: 19px;
            /*background-image: url(3.png);
              background-position:0 -207px;*/
          
        }
        ul>li:nth-last-of-type(1){
            border-right: none;
        }
        a{
        text-decoration: none;
            color:#4c7bab;
            margin: 1px;
        }
        a:hover{
        
            border-bottom: 2px solid mediumblue;
        }
        .active{
            display: block;
        }
    </style>
</head>
<body>
    <p>
        <span>站长之家</span>
        <span>行业资讯</span>
        <span>站长在线</span>
        <span>网站运营</span>
        <span>设计在线</span>
        <span>网络编辑</span>
        <span>联盟资讯</span>
        <span>服务器</span>
    </p>
    <ul>
        <li><a href="">业界动态</a></li>
        <li><a href="">收购融资</a></li>
        <li><a href="">门户动态</a></li>
        <li><a href="">搜索引擎</a></li>
        <li><a href="">网络游戏</a></li>
        <li><a href="">电子商务</a></li>
        <li><a href="">广告传媒</a></li>
        <li><a href="">厂商开发</a></li>
    </ul>
    <ul>
         <li><a href="">站长报道</a></li>
        <li><a href="">好站推荐</a></li>
        <li><a href="">站长聚会</a></li>
        <li><a href="">网站排行</a></li>
        <li><a href="">站长茶馆</a></li>
        <li><a href="">站长访谈</a></li>
    </ul>
    <ul>
         <li><a href="">建站经验</a></li>
        <li><a href="">策划盈利</a></li>
        <li><a href="">搜索优化</a></li>
        <li><a href="">网站推广</a></li>
        <li><a href="">免费资源</a></li>
    </ul>
    <ul>
        <li><a href="">酷站推荐</a></li>
        <li><a href="">网页设计</a></li>
        <li><a href="">WEB标准</a></li>
        <li><a href="">视频处理</a></li>
        <li><a href="">设计活动</a></li>
    </ul>
    <ul>
        <li><a href="">asp编程</a></li>
        <li><a href="">php编程</a></li>
        <li><a href="">.net编程</a></li>
        <li><a href="">xml编程</a></li>
        <li><a href="">access</a></li>
        <li><a href="">mssql</a></li>
        <li><a href="">mysql</a></li>
    </ul>
    <ul>
        <li><a href="">联盟动态</a></li>
        <li><a href="">联盟介绍</a></li>
        <li><a href="">联盟点评</a></li>
        <li><a href="">网赚技巧</a></li>    
    </ul>
    <ul>
        <li><a href="">web服务器</a></li>
        <li><a href="">ftp服务器</a></li>
        <li><a href="">dns服务器</a></li>
        <li><a href="">安全防护</a></li>
    </ul>
</body>
</html>
<script>
    var span = document.querySelectorAll('span');
    var ul = document.querySelectorAll('ul');
    var p = document.querySelector('p');
    for(var i = 1;i<span.length;i++){
       
        span[i].index = i;
        span[i].onmouseover = function(){
            for(var i = 0;i<ul.length;i++){
                ul[i].className = '';
            }
            ul[this.index - 1].className= 'active';
           
           var num =  ul[this.index - 1].style.marginLeft = p.offsetLeft + span[this.index].offsetWidth * this.index + 'px';
            if(this.index>=5){
                ul[this.index - 1].style.position = 'absolute';
                  num= ul[this.index - 1].style.right = p.offsetLeft  + 'px';
                  console.log(num)
            }
        //    console.log(num);
        }
    }
</script>